<template>
    <el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" label-width="auto" class="demo-ruleForm"
        :size="formSize" status-icon>
        <el-form-item label="审批编号" prop="NodeCode">
            <el-input v-model="ruleForm.NodeCode" />
        </el-form-item>
        <el-form-item label="节点名" prop="TypeCode">
            <el-select v-model="ruleForm.TypeCode" placeholder="请选择节点">
                <el-option v-for="menu in typelist" :label="menu.TypeName" :value="menu.TypeCode"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="审批名" prop="NodeName">
            <el-input v-model="ruleForm.NodeName" />
        </el-form-item>
        <el-form-item label="角色名" prop="RoleName">
            <el-select v-model="ruleForm.RoleId" placeholder="请选择角色">
                <el-option v-for="menu in menulist" :label="menu.RoleName" :value="menu.RoleValue"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="IsUseDept" prop="IsUseDept">
            <el-input v-model="ruleForm.IsUseDept" />
        </el-form-item>
        <el-form-item label="上一审批节点" prop="PrevNodeCode">
            <el-input v-model="ruleForm.PrevNodeCode" />
        </el-form-item>
        <el-form-item label="下一审批节点" prop="NextNodeCode">
            <el-input v-model="ruleForm.NextNodeCode" />
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="submitForm(ruleFormRef)">
                保存
            </el-button>
            <el-button @click="resetForm(ruleFormRef)">重置</el-button>
        </el-form-item>
    </el-form>
</template>

<script lang="ts" setup>
import { reactive, ref, onMounted } from 'vue'
import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
import { ElNotification } from 'element-plus'
import roleapi from "../../api/roleinfoapi"
import nodeapi from '../../api/wf_nodeapi'
import nodetype from  '../../api/wf_approvalflowapi'
const emit = defineEmits(['onSave'])

interface RuleForm {
    NodeCode: string
    TypeCode: string
    NodeName: string
    RoleId: number|null
    RoleName:string
    IsUseDept: number
    PrevNodeCode: string
    NextNodeCode: string
}

const formSize = ref<ComponentSize>('default')
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive<RuleForm>({
    NodeCode: '',
    TypeCode: '',
    NodeName: '',
    RoleId: null,
    RoleName:'',
    IsUseDept: 1,
    PrevNodeCode: '',
    NextNodeCode: ''
})
const menulist = ref<any>([])
const getrole = () => {
    roleapi.Query({}).then((res: any) => {
        menulist.value = res.data
        console.log("rs", menulist.value)
    })
}

const typelist = ref<any>([])
    const gettype = () => {
    nodetype.getAll().then((res: any) => {
        typelist.value = res.data
        console.log("rs", typelist.value)
    })
}
onMounted(() => {
    getrole()
    gettype()
})
const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            nodeapi.post(ruleForm).then((res: any) => {
                if (res.code == 1) {
                    ElNotification({
                        title: 'Success',
                        message: '添加成功',
                        type: 'success',
                        duration: 800,
                        onClose: () => {
                            emit("onSave", true)
                        }
                    })
                } else {
                    ElNotification({
                        title: 'Error',
                        message: '失败',
                        type: 'error',
                        duration: 800,
                    })
                }
            }).catch(err => {
                ElNotification({
                    title: 'Error',
                    message: '失败',
                    type: 'error',
                    duration: 800,
                })
            })
        } else {
            console.log('error submit!', fields)
        }
    })
}

const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
}

</script>


<style></style>